<template>
	<kb-layout title="优惠券">

		<view class="bg-white ">


			<view class="u-padding-left-30 u-padding-right-30">
				<view class="u-margin-top-30">
					<up-subsection :list="navs" font-size="16px" @change="i=>{navIndex=i; clearResult();fetchData()}"
						:current="navIndex"></up-subsection>
				</view>
			</view>

			<view class="sub-nav u-flex u-flex-center u-padding-30">
				<view class="">
					<up-tabs :list="statusTab" @click="onTabClick"></up-tabs>
				</view>

			</view>

		 <view class="u-padding-30 " >
			<view v-for="(item,index) in cardList" :key="index" class="u-margin-bottom-30">
				<myCouponItemVue :coupon="item"></myCouponItemVue>
			</view>	
				
		 <!-- 推荐商品end -->
		 </view>

			<up-empty v-if="isempty" mode="shop" text="暂无使用记录" icon="/static/empty/nodata.png"> </up-empty>



		</view>
		<!-- <kb-footer :color="ee.bgColor.weight"></kb-footer>	 -->
	</kb-layout>
</template>

<script>
	import { myCouponList } from '@/common/api';
	import myCouponItemVue from '../component/my-coupon-item.vue';
	export default {
		components:{
			 
			myCouponItemVue 
		},
		data() {
			return {
				keyword: "",
				cardList: [],
				navs: ['全部', '线上用券', '线下凭证'],
				navIndex: 0,
				page: 1,
				pagesize: 10,
				total: 0,
				shotips: undefined,
				nomore: true,
				statusTab: [{
					name: '已使用',
					status: 1
				}, {
					name: '已失效',
					status: 2
				}],
				status: 1,
			}
		},
		computed: {
			isempty() {
				return this.total == 0;
			}
		},
		onLoad() {
			this.fetchData();
		},
		methods: {
			onTabClick(e) {
				this.status = e.status;
				this.clearResult();
				this.fetchData();
			},
			onKeyword() {
				this.clearResult()
				this.fetchData()
			},
			clearResult() {
				this.cardList = [];
				this.page = 1;
				this.total = 0;
			},
			fetchData() {
 
				const params = {
					page: this.page,
					type: this.navIndex,
					keyword: this.keyword,
					limit: this.pagesize,
					status: this.status,
				};
				myCouponList(params).then((ret) => {

					if (ret.data.length > 0) {
						this.page = this.page + 1;
						this.total = ret.total;
						this.cardList = this.cardList.concat(ret.data);
					}
					 

				})
			}
		},
		onReachBottom() {
			if (this.total && this.total < this.page * this.pagesize)
				this.nomore = true;
			else
				this.total > 1 && this.fetchData();

			this.shotips = false;
			return true;

		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.bg-white {
		background-color: #fff;
		min-height: calc(100vh - 200px);
	}

	.bg-info {
		background-color: #F4F4F5;
	}

	.next-btn {
		position: fixed;
		bottom: 20px;
		left: 0;
		width: 100%;
		height: 10px;
		text-align: center;
	}

	.shadow {
		background-color: #fff;
		border-radius: 10px;
		background: #fff;
		box-shadow: #d4d2d2 0px 0px 10px;
		-webkit-box-shadow: #d4d2d2 0px 0px 10px;
		-moz-box-shadow: #d4d2d2 0px 0px 10px;
	}

	.divider {
		position: relative;
		height: 20px;
		/* 分割线的高度 */
		background-color: #fff;
		/* 分割线的颜色 */
		overflow: hidden;
		/* 确保超出部分不显示 */

		.border {
			border-top: 1px #d4d2d2 dashed;
			margin-top: 9px;
		}
	}

	.divider::before,
	.divider::after {
		content: '';
		position: absolute;
		width: 20px;
		height: 100%;
		background-color: #EFEEEE;
		border-radius: 50%;
		/* 半圆形状 */
		top: 0;
	}

	.divider::before {
		left: -13px;
	}

	.divider::after {
		right: -13px;
	}
</style>